<template>
  <div class="dashboard">
    <div class="stats-cards">
      <a-card class="stat-card">
        <template #title>设备总数</template>
        <div class="card-content">
          <span class="number">128</span>
          <span class="unit">台</span>
        </div>
      </a-card>
      <a-card class="stat-card">
        <template #title>借用中</template>
        <div class="card-content">
          <span class="number">32</span>
          <span class="unit">台</span>
        </div>
      </a-card>
      <a-card class="stat-card">
        <template #title>待维护</template>
        <div class="card-content">
          <span class="number">5</span>
          <span class="unit">台</span>
        </div>
      </a-card>
      <a-card class="stat-card">
        <template #title>用户数量</template>
        <div class="card-content">
          <span class="number">256</span>
          <span class="unit">人</span>
        </div>
      </a-card>
    </div>

    <div class="tables-container">
      <a-card class="table-card" title="最近借用记录">
        <a-table :columns="borrowColumns" :data-source="borrowData" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'status'">
              <a-tag :color="record.status === '借用中' ? 'blue' : 'green'">
                {{ record.status }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </a-card>
      <a-card class="table-card" title="待维护设备">
        <a-table :columns="maintenanceColumns" :data-source="maintenanceData" :pagination="false">
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'priority'">
              <a-tag :color="record.priority === '高' ? 'red' : record.priority === '中' ? 'orange' : 'blue'">
                {{ record.priority }}
              </a-tag>
            </template>
          </template>
        </a-table>
      </a-card>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const borrowColumns = [
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '借用人',
    dataIndex: 'user',
    key: 'user',
  },
  {
    title: '借用时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
  },
]

const maintenanceColumns = [
  {
    title: '设备名称',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '问题描述',
    dataIndex: 'issue',
    key: 'issue',
  },
  {
    title: '优先级',
    dataIndex: 'priority',
    key: 'priority',
  },
  {
    title: '报告时间',
    dataIndex: 'time',
    key: 'time',
  },
]

const borrowData = [
  {
    key: '1',
    name: '显微镜 A-001',
    user: '张三',
    time: '2024-03-15',
    status: '借用中',
  },
  {
    key: '2',
    name: '离心机 B-002',
    user: '李四',
    time: '2024-03-14',
    status: '已归还',
  },
]

const maintenanceData = [
  {
    key: '1',
    name: '分析仪 C-001',
    issue: '需要校准',
    priority: '高',
    time: '2024-03-15',
  },
  {
    key: '2',
    name: '培养箱 D-002',
    issue: '温度异常',
    priority: '中',
    time: '2024-03-14',
  },
]
</script>

<style scoped>
.dashboard {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 0;
  width: 100%;
}

.stats-cards {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  padding: 0;
  width: 100%;
}

.stat-card {
  flex: 1;
  min-width: 240px;
  margin: 0;
  width: calc(25% - 18px);
}

.card-content {
  display: flex;
  align-items: baseline;
}

.number {
  font-size: 36px;
  font-weight: bold;
  color: #1890ff;
  margin-right: 8px;
}

.unit {
  font-size: 16px;
  color: rgba(0, 0, 0, 0.45);
}

.tables-container {
  display: flex;
  gap: 24px;
  flex: 1;
  min-height: 0;
  padding: 0;
  width: 100%;
}

.table-card {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  margin: 0;
  width: calc(50% - 12px);
}

.table-card :deep(.ant-card-body) {
  flex: 1;
  overflow: auto;
  padding: 0;
}

.table-card :deep(.ant-table-wrapper) {
  height: 100%;
}

.table-card :deep(.ant-table) {
  height: 100%;
}

.table-card :deep(.ant-table-container) {
  height: 100%;
}

.table-card :deep(.ant-table-body) {
  height: 100% !important;
}

/* 响应式布局 */
@media screen and (max-width: 768px) {
  .dashboard {
    gap: 16px;
  }

  .stats-cards {
    gap: 16px;
  }

  .stat-card {
    min-width: 100%;
    width: 100%;
  }

  .tables-container {
    flex-direction: column;
    gap: 16px;
  }

  .table-card {
    width: 100%;
  }

  .number {
    font-size: 28px;
  }

  .unit {
    font-size: 14px;
  }
}

/* 自定义滚动条样式 */
.table-card :deep(.ant-table-body::-webkit-scrollbar) {
  width: 6px;
  height: 6px;
}

.table-card :deep(.ant-table-body::-webkit-scrollbar-thumb) {
  background: rgba(0, 0, 0, 0.2);
  border-radius: 3px;
}

.table-card :deep(.ant-table-body::-webkit-scrollbar-track) {
  background: rgba(0, 0, 0, 0.05);
}
</style> 